
<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      :model="form"
    >
      <el-row>
        <el-form-item label="文章标题">
          <el-input
            v-model="form.title"
            placeholder="请输入文章标题"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="文章描述">
          <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请用一句话介绍下文章"
          />
        </el-form-item>
      </el-row>
      <!-- <el-row>
        <el-form-item label="创建时间">
          <el-col :span="11">
            <el-date-picker v-model="form.date" type="date" placeholder="选择日期" style="width: 100%;" />
          </el-col>
          <el-col class="line" :span="2">--</el-col>
          <el-col :span="11">
            <el-time-picker v-model="form.time" placeholder="选择时间" style="width: 100%;" />
          </el-col>
        </el-form-item>
      </el-row> -->
      <el-row>
        <el-form-item label="标签">
          <el-select
            v-model="form.tag"
            placeholder="选择文章标签"
          >
            <el-option value="0">未分类</el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="文章插图">
          <el-upload
            class="upload-demo"
            action="/api/upload/img"
            list-type="picture"
            :on-success="uploadSuccess"
          >
            <el-button
              size="small"
              type="primary"
            >点击上传</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- <Tinymce v-model="text" /> -->
    <mavon-editor v-model="text" />
    <el-button
      type="primary"
      style="margin: 20px 0;"
      @click="submit"
    >提交</el-button>
  </div>
</template>
<script>
// import Tinymce from '@/components/Tinymce'
import * as APIS from '@/api/write'

export default {
  components: {
    // Tinymce
  },
  data() {
    return {
      form: {
        title: '',
        description: '',
        date: new Date().getTime(),
        tag: '',
        image: ''
      },
      text: ''
    }
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      this.form.image = response.url
    },
    submit() {
      this.form.date = new Date().getTime()
      APIS.submitArticle({ ...this.form, text: this.text }).then(res => {
        console.log(res, 'rss')
      })
    }
  }
}
</script>

    <style scoped>
.line {
  text-align: center;
}
</style>

